<template>
  <div class="title" :style="{'--theme': theme}">{{ name }}</div>
</template>

<script>
export default {
  name: 'titleComp',
  props: ['name'],
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  position: relative;
  margin: 5px;
  padding-left: 5px;
  font-size: 15px;
  font-weight: bold;
  border-left: 5px solid #{'var(--theme)'} !important;
}
</style>
